<!--
* @author: lzm
* @date: 2023年11月27日10:52:10
* @description：人员管理-历史登录时间弹窗
* @update: 2023年11月27日10:52:16
-->
<template>
  <div>
    <el-dialog
      :title="title"
      :visible="showDialog"
      width="940px"
      center
      custom-class="my-dialog  table-normal"
      @close="close"
    >
      <div class="form-top">
        <el-form ref="addForm" :model="addForm" :rules='rules' label-width="100px">
          <el-form-item label="工作任务">
            <el-input
              style="width: 250px"
              v-model.trim="addForm.taskName"
              placeholder="请输入任务名称"
            />
          </el-form-item>
          <el-form-item label='操作人' v-if="!isLogin">
            <el-input
              style='width: 250px'
              v-model='addForm.nickName'
              placeholder='请输入操作人名称'
            />
          </el-form-item>
          <el-button class="chamfer-corners-8" type="primary" @click="addBtn"
            >添加{{useContent}}物料</el-button
          >
        </el-form>
      </div>
      <el-table
        :data="inOutList"
        fit
        style="width: 100%"
        header-row-class-name="tableHeader"
        header-cell-class-name="tableTrHeader"
        row-class-name="tableRow"
        cell-class-name="tableCell"
      >
        <el-table-column type="index" label="序号" align="center" width="80" />
        <el-table-column prop="goodsName" label="物料名称" align="center" />
        <el-table-column prop="goodsModel" label="规格型号" align="center" />
        <el-table-column prop="" width="120" label="物料缩略图" align="center">
          <template v-slot="{ row }">
            <img
              v-if="row.goodsImage"
              :src="row.goodsImage"
              style="width: 60px; height: 60px"
            />
            <img
              v-else
              src="@/assets/shelf_manage_img/shelf-item.png"
              style="width: 60px; height: 60px"
            />
          </template>
        </el-table-column>
        <el-table-column
          v-if="isType==1"
          prop="plannCount"
          label="领用量"
          width="140"
          align="center"
        >
          <template v-slot="{ row }">
            <div v-if="row.isEdit">
              <el-input-number
                class="editInput"
                size="small"
                controls-position="right"
                v-model="row.planCount"
                :ref="'count' + row.id"
                :min="0"
                :max="row.totalCount"
                inputmode='numeric'
                label="领用数量"
              ></el-input-number>
              <!-- <el-input
                class="editInput"
                v-model="row.planCount"
                :ref="'count' + row.id"
                oninput="value=value.replace(/[^\d]/g,'')"
                :min="0"
                :max="row.totalCount"
              ></el-input> -->
              <i
                class="el-icon-check rightIcon"
                @click.stop="editCountBtn(row)"
              ></i>
            </div>
            <div v-else>
              <span class="weight">
                {{ row.planCount || 0 }}
              </span>
              <div class="editBtn" @click="editCount(row)"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          v-if="isType==2"
          prop="plannCount"
          label="归还量"
          width="140"
          align="center"
        >
          <template v-slot="{ row }">
            <div v-if="row.isEdit">
              <el-input-number
                class="editInput"
                size="small"
                controls-position="right"
                v-model="row.planCount"
                :ref="'count' + row.id"
                :min="0"
                :max="99999"
                label="归还数量"
              ></el-input-number>
              <i
                class="el-icon-check rightIcon"
                @click.stop="editReturnCountBtn(row)"
              ></i>
            </div>
            <div v-else>
              <span class="weight">
                {{ row.planCount || 0 }}
              </span>
              <div class="editBtn" @click="editCount(row)"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" align="center">
          <template v-slot="{ row }">
            <el-button type="text" class="revokeBtn" @click="revokeBtn(row)"
              >撤销</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button
        type="primary"
        class="chamfer-corners-8"
        @click="confirmBtn"
        style="margin-top: 10px"
      >
        确认{{useContent}}
      </el-button>
    </el-dialog>
  </div>
</template>
<script>
import { parseTime } from '@/utils'
import {mapGetters} from "vuex";
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '确认领用物料'
    },
    materials: {
      type: Array,
      default: []
    },
    isType:{
      type: [String,Number],
      default: ''
    },
    useContent: {
      type: String,
      default: '领用'
    },
  },

  data() {
    return {
      addForm: {
        // 任务名称
        taskName: '',
        // 操作人
        nickName: ''
      },
      rules:{
        nickName: [
          { required: true, message: '请输入操作人', trigger: 'blur' }
        ]
      },
      inOutList: [], // 出入库列表
      showTimeDialog: false // 控制实时出入库弹窗
    }
  },
  created() {},
  watch: {
    materials:{
      handler(val) {
        this.inOutList = [...val]
      },
      deep: true
    },
  },
  computed: {
    ...mapGetters(['isLogin']),
  },
  filters: {
    formatDate(time) {
      return parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}')
    }
  },
  methods: {
    // 关闭弹窗清空所有值
    close() {
      this.$emit('update:showDialog', false)
    },
    // 添加领用物料
    addBtn() {
      this.$emit('update:showDialog', false)
    },
    // 撤销按钮
    revokeBtn(row) {
      this.$emit('revokeFn', row.id)
    },
    // 设置数量
    editCount(row) {
      row.isEdit = true
      let id = 'count' + row.id
      // 获取焦点
      this.$nextTick(() => {
        this.$refs[id].focus()
      })
    },
    // 修改数量
    editCountBtn(row) {
      if (!row.planCount) {
        this.$message({
          message: '请输入领用数量',
          type: 'warning'
        })
        return
      }
      row.isEdit = false
      this.$message.success('修改数量成功！')
    },
    // 修改归还数量
    editReturnCountBtn(row) {
      row.isEdit = false
      this.$message.success('修改数量成功！')
    },
    // 确认领用
    confirmBtn() {
      if (!this.inOutList.length) {
        this.$message({
          message: '请先选择要领用的物料！',
          type: 'warning'
        })
        return
      }
      let isFinish = true
      for (let i = 0; i < this.inOutList.length; i++) {
        if (!this.inOutList[i].planCount) {
          isFinish = false
          break
        }
      }
      if (this.isType==1 && !isFinish) {
        this.$message({
          message: '请先设置领用数量！',
          type: 'warning'
        })
        return
      }
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (this.addForm.taskName) {
            this.inOutList.forEach((item) => {
              item.taskName = this.addForm.taskName
              item.nickName = this.addForm.nickName
            })
          } else {
            this.inOutList.forEach((item) => {
              item.taskName = '默认任务'
              item.nickName = this.addForm.nickName
            })
          }
          this.$emit('requisitionCompleted', this.inOutList, this.addForm.taskName, this.addForm.nickName)
        }
      })

    }
  }
}
</script>
<style scoped lang="scss">
@import '@/styles/_handle.scss';

.form-top {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
  margin-bottom: 4px;
  height: 72px;
  @include background('table_head_bgcolor');
  border-radius: 10px;
  .el-form {
    display: flex;
    justify-content: center;
    align-items: center;
    .el-form-item {
      margin-bottom: 0;
    }
    .chamfer-corners-8 {
      margin-left: 16px;
      font-size: 16px;
    }
  }
}

// 修改小图标样式
.rightIcon {
  margin-left: 5px;
  font-size: 20px;
  font-weight: 700;
  @include font_color('material_edit_color');
}
// 正常展示宽度
.weight {
  width: 70px;
  display: inline-block;
}
::v-deep .editInput {
  width: 70px;
  height: 30px;
  .el-input__inner {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
  }
}
.editBtn {
  display: inline-block;
  margin-left: 3px;
  width: 16px;
  height: 16px;
  @include background('material_edit_icon');
}
.revokeBtn {
  font-size: 18px;
  @include font_color('material_edit_color');
}
::v-deep .el-dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  .chamfer-corners-8 {
    font-size: 18px;
  }
}
.el-row {
  text-align: center;
}
// 弹窗样式
::v-deep .el-dialog--center .el-dialog__body {
  padding: 0px 25px 30px;
}
// 表格样式
::v-deep .el-table {
  margin-top: 12px;
  background: transparent;
  border: none;
  // 表头行样式
  .tableHeader {
    height: 48px;
    -webkit-clip-path: polygon(
      10px 0,
      calc(100% - 10px) 0,
      100% 15%,
      100% 85%,
      calc(100% - 10px) 100%,
      10px 100%,
      0 85%,
      0 15%
    );
    clip-path: polygon(
      10px 0,
      calc(100% - 10px) 0,
      100% 15%,
      100% 85%,
      calc(100% - 10px) 100%,
      10px 100%,
      0 85%,
      0 15%
    );
  }
  // 表头单元格样式
  .tableTrHeader {
    background-color: transparent;
    border: none;
    font-weight: 400;
    color: #fff;
    font-size: 18px;
  }
  // 表格行样式
  .tableRow {
    background-color: transparent;
    border: none;
  }
  // 表格单元格样式
  .tableCell {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
  }
}
// 去除表头底部横线
::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border: none;
}
// 取消表格底部横线
::v-deep .el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: none;
}
::v-deep .el-table__body-wrapper {
  height: 30vh;
  overflow-y: auto;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::v-deep .el-table__empty-block {
  font-size: 18px;
}

::v-deep .el-input-number .el-input-number__increase {
  display: none;
}

::v-deep .el-input-number .el-input-number__decrease {
  display: none;
}

::v-deep .el-input-number.is-controls-right .el-input__inner {
  padding-right: 0;
  padding-left: 0;
}
</style>
